import React, { useEffect ,useState} from 'react'
import axios from 'axios'
import './index.css'
import {  DotLoading } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const Index:React.FC = () => {

    interface TabItem{
      key:string,
      title:string,
      img:string,
      children?:Array<TabItem>,
      id?:string
    }

  const [datas,setDatas]=useState([])

  const navigate=useNavigate()
  const Renders=async()=>{
    const res=await axios.get('/api/tabSilce')
    console.log(res.data);
    const {code,tabSilce} =res.data
    if(code===200){
      setDatas(tabSilce[0].children)
       console.log(tabSilce[0].children,'aaa');   
    }else{
      <DotLoading color='primary' />
      
    }
  }
const godetail=(item:any,index:number)=>{
   let { id } = item;
    navigate(`/seekingmedicalattentiondetail/${id}/${datas}`)
    
}
  useEffect(() => {
    Renders()
  },[])

  
  return (
    <div>
        <div className='gravida'>
            <img src="../../../public/image/图片37.png" alt="" />
        </div>
        <div className='gravidas'>
           
            <div>
               <img src="../../../public/image/图片38.png" alt="" />
               <p>咨询医生</p>
            </div>
             <div>
               <img src="../../../public/image/图片39.png" alt="" />
               <p>严选好物</p>
            </div>
             <div>
               <img src="../../../public/image/图片40.png" alt="" />
               <p>孕妈群</p>
            </div>
             <div>
               <img src="../../../public/image/图片41.png" alt="" />
               <p>更多</p>
            </div>
        </div>
        <div>
          <h2 style={{margin:"4%"}}>找医生</h2>
           <div className="doctor">
            {datas.length > 0 &&
              datas.map((item, index) => (
              
                  <div key={index}>
                    <dl className='details' onClick={()=>godetail(item,index)}>
                      <dt>
                        <img src={item.img} />
                      </dt>
                      <dd>
                        <dd>{item.title}&emsp;</dd>
                        <dd>{item.yi}&emsp;妇科门诊</dd>
                        <dd style={{color:'skyblue'}}>{item.tag}</dd>
                        <dd>
                          <span className="ftcolor">{item.zxl}</span>咨询量
                          <span className="ftcolor">{item.hpl}%</span>好评率                        
                        </dd>
                        <dd>擅长:{item.desc}</dd>
                      
                      </dd>
                    </dl>
                  </div>
              ))}
          </div>
        </div>
    </div>
  )
}

export default Index
